:root {
  --rotation: 10deg;
  --rotationVal : 10;
  --opac: 0.0;
}

@font-face {
  font-family: myFont;
  src: url(barlowfold.otf);
}

@font-face {
  font-family: bodyText;
  src: url(Sen-VariableFont_wght.ttf);
  font-weight: 200;
}

body { font-family: MyFont; }

.scene {
  z-index: 0;
  position: absolute;
  left: 0vw;
  top: 0vw;
  width: 100vw;
  height: 100vh;
  perspective: 3000px;
  perspective-origin: 50vw 100vh;
  overflow: hidden;
  transition: opacity 1s;
  opacity: var(--opac);
}

.scene2 {
  z-index: -999;
  position: absolute;
  left: 0vw;
  top: 0vw;
  width: 100vw;
  height: 100vh;
  perspective: 3000px;
  perspective-origin: 50vw 100vh;
  overflow: hidden;
  transition: opacity 1s;
  opacity: var(--opac);
}

.bg img {
  z-index: -99999;
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100vw;
  height: 100vh;
  transition: opacity 1s;
  opacity: var(--opac);
}

@media only screen and (hover: none) and (pointer: coarse){
  .bg img {
  bottom: 0px;
  }
}

.box {
  width: 100vw;
  height: 100vh;
  position: relative;
  transform-origin: 0vw 0vh 15vh;
  transform: translateZ( -15vh);
  transform-style: preserve-3d;
  transition: transform 1s;
}

@media only screen and (hover: none) and (pointer: coarse){
  .box {
  width: 100vw;
  height: 100vh;
  position: relative;
  transform-origin: 0vw 0vh 25vh;
  transform: translateZ( -15vh);
  transform-style: preserve-3d;
  transition: transform 1s;
}
}

.box.show-front  { transform: translateZ( -15vh) rotateY(   0deg); }
.box.show-back   { transform: translateZ( -50px) rotateY(-180deg); }
.box.show-right  { transform: translateZ(-10vw) rotateY( -20deg); }
.box.show-left   { transform: translateZ(-10vw) rotateY(20deg);}
/*.box.show-left   { transform: translateZ(-10vw) rotateY( calc(1deg * calc((asin(100 * var(--w)/(sqrt(pow(40 * var(--h),2) + pow(100 * var(--w),2)))))))); }*/
.box.show-top    { transform: translateZ(-10vh) rotateX( -40deg); }
.box.show-bottom    { transform: translateZ(-10vh) rotateX( 40deg); }

@media only screen and (hover: none) and (pointer: coarse){
  .box.show-top    { transform: translateZ(-25vh) rotateX( -30deg); }
  .box.show-front  { transform: translateZ( -25vh) rotateY(   0deg); }
  .box.show-left   { transform: translateZ(-10vw) rotateY(40deg);}
  .box.show-right   { transform: translateZ(-10vw) rotateY(-40deg);}
  .box.show-bottom    { transform: translateZ(-10vh) rotateX( 30deg); }
  }




.box__face {
  position: absolute;
  color: rgb(0, 0, 0);;
  text-align: center;
}

.cornerbutton {
  position :fixed;
  background-color: #2c78f9;
  font-size: 2vh;
  right: 0vw;
  width: 100vw;
  height: 5vh;
  bottom: 0px;
  text-align: left;
  color: rgb(255, 255, 255);
}

.cornerbutton p{
  position: relative;
  top: 0px;
  left: 2ex;
}


@media only screen and (hover: none) and (pointer: coarse){
  .cornerbutton  { height: 8vh; font-size: 5vh; line-height: 0px;}
  }


.box__face--front,
.box__face--back {
  width: 100vw;
  height: 100vh;
  /*line-height: 10vh;*/
}

.content {
  display: flex;
  flex-wrap: wrap;
  image-rendering: optimizeQuality;
  overflow: scroll;
  scrollbar-color: #2c78f9  #2c2c2c00;
  scrollbar-width: thin;
  position: absolute;
  bottom: 5vh;
  width: 99vw;
  height: 94vh;
  margin: 0.5vh 0.5vw;
  isolation: isolate;
}

@media only screen and (hover: none) and (pointer: coarse){
    .content  { max-height: 92vh; width: 100vw; bottom: 8vh; margin: 1vw 0vh;}
  }

.post {
  margin: 0.1vw;
  cursor: pointer;
  height: 40vh;
  flex-grow: 1;
}

@media only screen and (hover: none) and (pointer: coarse){
  .post  { max-width: 100%; height: auto; margin: 1vw 0vw;}
  }

.post :last-child{
  flex-grow: 10;
}

.post img {
  image-rendering: optimizeSpeed;
   max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

@media only screen and (hover: none) and (pointer: coarse){
  .post img { min-height: auto; max-width: 100%;}
  }



.box__face--bottom {
  z-index: 100;
  position: absolute;
  background-color: #2c77f900;
  color: rgb(255, 115, 0);
  width: 100vw;
  height: 30vh;
  top:35vh;
  text-align: right;
  /*line-height: 100vh;*/
}

@media only screen and (hover: none) and (pointer: coarse){
  .box__face--bottom { width: 100vw; height: 50vh;top:25vh;}
  }


.index {
  position: absolute;
  z-index: 101;
  left: 10vw;
  top: 0px;
  font-size: 1.5vw;
  overflow: hidden;
  padding: 1vw;
  text-align: left;
}

@media only screen and (hover: none) and (pointer: coarse){
  .index   { font-size: 4vw; bottom: 30vw; left: 20vw;}
  
  }

.box__face--bottom h2{
  font-size: 4vh;
  line-height: 0vw;
  text-align: left;
}

@media only screen and (hover: none) and (pointer: coarse){
  .box__face--bottom h2 {font-size: 8vw;}
  }


.box__face--bottom a{
  display: block; color: rgb(255, 115, 0);  text-decoration: none;
}

.box__face--bottom img {
  position: absolute;
  bottom: 0px;
  left: 0vw;
  width: 26vw;
}

@media only screen and (hover: none) and (pointer: coarse){
  .box__face--bottom img {width: 52vw;}
  }

.box__face--bottom a.active { background-color: rgb(255, 115, 0); color: white; }

.box__face--bottom a:hover:not(.active) { background-color: rgb(255, 115, 0); color: white; }


.box__face--front  { background: hsl(0, 0%, 100%); }
.box__face--right  { background: hsla(209, 100%, 50%, 0); }
.box__face--back   { background: #2c78f9; }
.box__face--left   { background: hsl(212, 100%, 50%); }
.box__face--top    { background: #2c77f900; }
.box__face--bottom { background: #2c77f900; }

.box__face--front  { transform: rotateY(  0deg) translateZ( 15vh); }

@media only screen and (hover: none) and (pointer: coarse){
  .box__face--front {transform: rotateY(  0deg) translateZ( 25vh);}
  }


.box__face--left   { transform: translateX(-50vw) rotateY(-90deg);}
.box__face--bottom   { transform:  translateY(50vh) rotateX(270deg);}

.foreground {
   display: flex;
  position: absolute;
  transform-origin: center;
  width: 100vw;
  left: 0vw;
  height: 100vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(-12vh) translateY(50vh) rotateX(-40deg);
  pointer-events: none;
}

.foreground img {
  image-rendering: optimizeSpeed;
  align-self: center;
  max-width: 100%;
  pointer-events: none;
}
@media only screen and (hover: none) and (pointer: coarse){
  .foreground {
  width: 100vw;
  left: 0px;
  height: 100vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(-3vh) translateY(47vh) rotateX(  -30deg);
  pointer-events: none;
  }
}

@media (max-width: 758px){
  .fire {
  width: 100vw;
  left: 0px;
  height: 100vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(-3vh) translateY(28vh) rotateX(  -30deg);
  pointer-events: none;
  }
}


.fire {
  display: flex;
  position: absolute;
  transform-origin: center;
  width: 100vw;
  left: 0vw;
  height: 100vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(-20vh) translateY(45vh) rotateX(-40deg);
  pointer-events: none;
}

.fire img {
  image-rendering: optimizeSpeed;
  align-self: center;
  max-width: 100%;
  pointer-events: none;
}
@media only screen and (hover: none) and (pointer: coarse){
  .fire {
  width: 100vw;
  left: 0px;
  height: 100vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(-6vh) translateY(35vh) rotateX(  -30deg);
  pointer-events: none;
  }
  }

  @media (max-width: 758px){
  .fire {
  width: 100vw;
  left: 0px;
  height: 100vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(-6vh) translateY(28vh) rotateX(  -30deg);
  pointer-events: none;
  }
  }

.spaceship {
   display: flex;
  position: absolute;
  transform-origin: center;
  width: 100vw;
  left: 0vw;
  height: 100vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(-22vh) translateY(43vh) rotateX(-40deg);
  pointer-events: none;
  
}

@media only screen and (hover: none) and (pointer: coarse){
  .spaceship {
  width: 100vw;
  left: 0px;
  height: 100vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(-9vh) translateY(32vh) rotateX(  -30deg);
  pointer-events: none;
  }
  }

  @media (max-width: 758px){
  .spaceship {
  width: 100vw;
  left: 0px;
  height: 100vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(-9vh) translateY(35vh) rotateX(  -30deg);
  pointer-events: none;
  }
  }

.spaceship img {
  image-rendering: optimizeSpeed;
  align-self: center;
  max-width: 100%;
  pointer-events: none;
}

.modal {
  opacity: 0.0;
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
    transition: opacity 2.0;
    image-rendering: optimizeQuality;
}

.modal-content {
transform: scale(1);
  position: relative;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

.modal.show {
  display: flex;
  opacity: 1.0;
}

/* Close button */
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  color: #ffffff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
}

/* Caption of modal image */
.caption {
  position: absolute;
  bottom: 15px;
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-size: 24px;
}